import React from 'react'
import MainTitle from '../../../components/MainTitle'
import { Form, Input, Button, InputNumber, Space, Row, Col, Card, Tooltip, message, Modal, Table } from 'antd';


import { UserOutlined, ClearOutlined, DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons';

import { useState } from 'react';

import request from '../../../utils/request'
import { useEffect, useCallback } from 'react';

import { useRef } from 'react';
import BuildingModel from './BuildingModel';
export default function BuildingManage() {
    const [form] = Form.useForm();
    // const [adminForm] = Form.useForm();
    //所有宿舍楼信息
    const [buildings, setBuildings] = useState([])
    //当前宿舍楼管理员
    const [buildingAdmin, setBuildingAdmin] = useState([])
    //当前宿舍楼清洁员
    const [buildingClean, setBuildingClean] = useState([])
    //当前宿舍楼
    const [nowbuilding, setNowBuilding] = useState([])
    const [isAdmin, setIsAdmin] = useState('')
    const [isShow, setIsShow] = useState(false)
    // const inpvalue = useRef()
    const { confirm } = Modal;
    //获取宿舍一览数据
    const getBuildingsInfo = useCallback(async function () {
        const { data } = await request.get('/building/getBuildings')
        setBuildings(data.data.buildings)
    }, [])


    //创建宿舍楼
    const onFinish = useCallback(async (values) => {
        const { data } = await request.post('/building/addBuildingWithRoom', {
            ...values
        })
        if (data.success === true) {
            form.resetFields();
            message.success('创建宿舍楼成功');
            getBuildingsInfo()
            message.success('宿舍楼数据更新成功')
        }
    }, []);
    //重置
    const onReset = () => {
        form.resetFields();
    };
    //初始化获取数据
    useEffect(() => {
        getBuildingsInfo()
    }, [])
    //删除宿舍楼
    const deleteBuliding = useCallback((e) => {
        confirm({
            title: '提示',
            icon: <ExclamationCircleOutlined />,
            content: `确认要删除 “${e.name}” 宿舍吗?`,
            okText: '确定',
            okType: 'danger',
            cancelText: '取消',
            onOk() {
                request.delete('/building/delBuilding', {
                    params: { id: e.id }
                }).then(() => {
                    getBuildingsInfo()
                })
                message.success('删除宿舍楼成功')
            },
            onCancel() {
                message.info('已取消')
            },
        });

    }, []);

    // 点击显示model
    const showModal = useCallback((item) => {
        setNowBuilding(item)
        setIsShow(true)
    }, [isShow]);

    const [ModelInfo, setModealInfo] = useState({})
    const changeShow = useCallback((item) => {
        setIsShow(item)
    }, [])

    return (
        <div id="BuildingManage">
            <MainTitle>创建宿舍楼</MainTitle>
            <div className='wrapper' style={{ margin: '40px 0' }}>
                <div id='create-building' style={{ backgroundColor: '#fff', padding: 20 }}>
                    <Form
                        form={form}
                        name="basic"
                        layout="inline"
                        initialValues={{
                            remember: true,
                        }}
                        autoComplete="off"
                        onFinish={onFinish}
                        initialValues={
                            {
                                'floorCount': 1,
                                'roomCount': 1
                            }
                        }
                    >
                        <Form.Item
                            label="宿舍楼名"
                            name="name"
                            rules={[
                                {
                                    required: true,
                                    message: '请填写宿舍楼名 !',
                                },
                            ]}
                        >
                            <Input placeholder="请输入" />
                        </Form.Item>
                        <Form.Item
                            label="楼层数"
                            name="floorCount"
                            rules={[
                                {
                                    required: true,
                                    message: '请填写楼层数 !',
                                },
                            ]}
                        >
                            <InputNumber min={1} />
                        </Form.Item>
                        <Form.Item
                            label="每层楼房间数"
                            name="roomCount"
                            rules={[
                                {
                                    required: true,
                                    message: '请填写每层楼房间数 !',
                                },
                            ]}
                        >
                            <InputNumber min={1} />
                        </Form.Item>
                        <Form.Item
                            style={{ marginLeft: '10%' }}
                        >
                            <Space>
                                <Button type="primary" htmlType="submit" size='large' danger onClick={onReset}>
                                    清空
                                </Button>
                                <Button type="primary" htmlType="submit" size='large'>
                                    创建
                                </Button>
                            </Space>
                        </Form.Item>

                    </Form>

                </div>
            </div>
            <MainTitle>宿舍楼一览</MainTitle>
            <div className='wrapper' style={{ margin: '40px 0' }}>
                <div className="site-card-wrapper">
                    <Row gutter={16}>
                        {buildings.length == 0 ? '暂无更多数据 ' :
                            buildings.map((item, index) => {
                                return (
                                    <Col span={8} style={{ marginBottom: '30px' }} key={item.id}>
                                        <Card title={'NO.' + (index + 1) + '   ' + item.name} bordered={false}
                                            bodyStyle={{ fontSize: 16, color: '##606266', backgroundColor: '#fff', position: 'relative', }}
                                            headStyle={
                                                { backgroundColor: '#1890ff', fontSize: 20, color: '#fff', fontWeight: 600 }
                                            }
                                        >
                                            <div style={{ position: 'absolute', right: 30, top: -15 }}>
                                                <Space size='middle'>
                                                    <Tooltip placement="bottom" title="添加管理员">
                                                        <Button shape="circle" style={{ backgroundColor: '#FAAD14', borderColor: '#FAAD14' }} type="primary" icon={<UserOutlined />} onClick={() => {
                                                            setIsAdmin('admin')
                                                            setModealInfo({
                                                                titleA: '管理员信息',
                                                                titleB: '已有的管理员',
                                                                titleC: '添加管理员',
                                                                titleD: '请输入管理员姓名或账号'
                                                            })

                                                            showModal(item)

                                                        }}></Button>
                                                    </Tooltip>
                                                    <Tooltip title="添加保洁">
                                                        <Button shape="circle" icon={<ClearOutlined />}
                                                            onClick={() => {
                                                                setIsAdmin('clean')
                                                                setModealInfo({
                                                                    titleA: '保洁员信息',
                                                                    titleB: '已有的保洁员',
                                                                    titleC: '添加保洁员',
                                                                    titleD: '请输入保洁员姓名'
                                                                })
                                                                showModal(item)
                                                            }}
                                                        ></Button>
                                                    </Tooltip>
                                                    <Tooltip placement="bottom" title="删除宿舍楼">
                                                        <Button shape="circle" type="primary" danger icon={<DeleteOutlined />} onClick={() => {
                                                            deleteBuliding(item)
                                                        }}></Button>
                                                    </Tooltip>
                                                </Space>
                                            </div>
                                            <div >
                                                楼层数： <b>
                                                    {item.floorCount}
                                                </b>
                                            </div>
                                            <div>
                                                房间数： <b>
                                                    {item.roomCount}
                                                </b>
                                            </div>
                                            <div>
                                                学生数： <b>
                                                    1
                                                </b>
                                            </div>
                                        </Card>
                                    </Col>
                                )
                            })
                        }
                    </Row>

                    <BuildingModel isAdmin={isAdmin} ModelInfo={ModelInfo} Visible={isShow} change={changeShow} nowbuilding={nowbuilding}>
                    </BuildingModel >
                </div>

            </div>

        </div>
    )
}